<template>
      
    <div>
        <!-- 用户名 -->
         <div class='L-header'>
        <div class='banner'>
             <router-link to='/set' tag="div" class='iconfont left'>&#xe611;</router-link>
             <div class='iconfont right'>&#xe67b;</div>
        </div>
        <div class='circle'>
          <div class='top'></div>
          <div class='button'> 用户 {{username}}  <i>></i></div>
        </div>
     </div>

      <!-- 待收货 -->
     <div class='body'>
          <div class='body-box'>
        <router-link to='/pay' tag="div" class='iconfont  '><span>&#xe612;</span> <p id='size'>待支付</p></router-link>
          <router-link to='/money' tag="div" class='iconfont  '><span>&#xe60e;</span><p id='size'>待收货</p></router-link>
          <router-link to='/good' tag="div" class='iconfont  '><span>&#xe66b;</span><p id="size">待评价</p></router-link>
         <router-link tag="div" to='/L-whole'><span class='iconfont  allD'><span>&#xe607;</span><p id='size'>全部订单</p></span></router-link>
          </div>
     </div>
     <div class='min'>
       <div class='center'>
        <router-link to='/My-message' tag="div" class='iconfont my-min'><span>&#xe62f;</span><p>我的发布</p></router-link>
       <router-link to='/Mycollect' tag="div" class='iconfont my-min'><span>&#xe60d;</span><p>我的收藏</p></router-link>
       <router-link  to='/browse' tag="div" class='iconfont my-min'><span>&#xe624;</span><p>浏览历史</p></router-link>
       </div>

       
     <div class='min-button'>
           
      <router-link  to='/site' tag="div" class='iconfont '><span class='button-min'>&#xe60c;</span><p>常用地址</p></router-link>
       <router-link to='/service' tag="div" class='iconfont '><span class='button-min'>&#xe65a;</span><p>联系客服</p></router-link>
        
        
        <router-link tag="div" to="/feedback">
        <div class='iconfont yijian'>
            <span class='button-min'>&#xe625;</span>
            <p>意见反馈</p>
        </div>    
     </router-link>
        </div>
           
      </div> 

     </div>

   
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name: "index",
   computed:{
     ...mapState('loginModule',{
       username:state=>state.user.username
     })
   },
  mounted(){},

  methods:{
    GoPublish(){
      this.$router.push('/My-message')
    }
  }
  }
</script>

<style>

.L-header {
  width: 100%;
}
.banner {
  width: 95%;
  margin: 0 auto;
  height: 50px;
}
.left {
  font-size:19px;
  float: left;
  color: #808080;
}
.right {
   font-size:16px;
  float: right;
  color: #808080;
}
.circle {
  width: 100%;
}
.top {
  width: 66px;
  height: 66px;
  background-color: #a9a9a9;
  border-radius: 50%;
  text-align: center;
  margin: 0 auto;
}
.button {
  font-weight: bold;
  text-align: center;
  margin-bottom: 42px;
}
.button i {
  font-size: 16px;
}
.body {
  width: 100%;
  border-top: 1px solid #dcdcdc;
}
.body-box {
  margin-top: 22px;
  display: flex;
 
}

.body-box div {
  width: 25%;
  text-align: center;
  font-size: 34px;
  
}

#size {
  font-size: 14px;
}

.min {
  width: 100%;
  margin-top: 10px;
}

.center {
  display: flex;
}

.center div {
  flex: 1;
  font-size: 32px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
  margin: 0 auto;
  padding: 20px;
}

.center div:nth-child(2) {
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
}

.my-min p {
  font-style: normal;
  font-size: 16px;
}
.min-button {
  display: flex;
}
.min-button div {
  flex: 1;
  font-size: 32px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
  padding: 20px 20px 0 20px;
  height: 92px;
}
.min-button p {
  font-size: 16px;
}
.min-button div:nth-child(2) {
  border-right: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
}
.allD{
  font-size: 34px;
}
.min-button .yijian{
  padding: 0;
}
</style>